<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户注册</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  

<script>
	function zhuce() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入用户名。");
        return false;
    }
    var a = document.forms["myForm"]["password"].value;
    if (a == null || a == "")
      {
    alert("请输入密码");
    return false;
    }
    var m = document.forms["myForm"]["password"].value;
        b = document.forms["myForm"]["password1"].value;
    if (b == null || b !== m )
  {
    alert("两次密码输入不一致");
    return false;
    }
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
    {
        alert("不是一个有效的 e-mail 地址");
        return false;
        }
    var search_site = document.getElementById("fname").value;  
        var keyname = localStorage.getItem(search_site);  
       if(keyname!==null)
       {
           alert("用户名已使用");
           return false;
    }
  }
    function save(){  
    var site = new Object;
  //site.name=localStorage.length;

    site.keyname = document.getElementById("fname").value;
    site.sitename = document.getElementById("email").value;  
    site.siteurl = document.getElementById("password").value;
  var d=new Date();
  site.nowtime=d.toLocaleDateString();
    var str = JSON.stringify(site); // 将对象转换为字符串

    localStorage.setItem(site.keyname,str);  
 window.location.href='http://buptjijing.gitee.io/buptsice_training_2017_2/用户登录2.0.html';
    alert("注册成功");
  }
	
</script>




	<style>
	p
	{text-align: center}
	h1
	{text-align: center}
	body
		{
	background-color:#b0c4de;
}
	.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}
	</style>







</head>
<body>
<div class="page-header">
    <h1>风流之家
        <small>Fengliu</small>
    </h1>
</div>
<div style="padding: 75px 475px 75px;">
	<form class="bs-example bs-example-form" name="myForm" onsubmit="save();" method="get" >
		<div class="input-group">
			<label class="input-group-addon">姓名</label>
			<input type="text" class="form-control"  placeholder="Your Name">
		</div>
		<br>
		<div class="input-group">
			<label class="input-group-addon">电话号码</label>
			<input type="text" class="form-control" placeholder="+86">
		</div>
		<br>
		<div class="input-group">
			<label for="email" class="input-group-addon">邮箱</label>
			<input type="text" class="form-control" id="email" placeholder="@qq.com">
		</div>
		<br>
		<div class="input-group">
		<label for="fname" class="input-group-addon">用户名</label>
			<input type="text" class="form-control" id="fname" placeholder="Your Accourt Name">
		</div>
		<br>
		<div class="input-group">
			<label for="password" class="input-group-addon">密码</label>
			<input type="text" class="form-control" id="password" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)" placeholder="Password">
		</div>
        <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="23" style="display:inline">  
<tbody><tr align="center" bgcolor="#eeeeee">  

<td width="33%" id="strength_L">弱</td>  
<td width="33%" id="strength_M">中</td>  
<td width="33%" id="strength_H">强</td>  
</tr>  
</tbody></table>   
		<br>
		<div class="input-group">
			<label for="password1" class="input-group-addon">确定密码</label>
			<input type="text" class="form-control" id="password1" placeholder="Confirm Password">
		</div>
		<br>

        <script>
 function CharMode(iN){  
if (iN>=48 && iN <=57) //数字  
return 1;  
if (iN>=65 && iN <=90) //大写字母  
return 2;  
if (iN>=97 && iN <=122) //小写  
return 4;  
else  
return 8; //特殊字符  
}  

//bitTotal函数  
//计算出当前密码当中一共有多少种模式  
function bitTotal(num){  
modes=0;  
for (i=0;i<4;i++){  
if (num & 1) modes++;  
num>>>=1;  
}  
return modes;  
}  

//checkStrong函数  
//返回密码的强度级别  

function checkStrong(sPW){  
if (sPW.length<=4)  
return 0; //密码太短  
Modes=0;  
for (i=0;i<sPW.length;i++){  
//测试每一个字符的类别并统计一共有多少种模式.  
Modes|=CharMode(sPW.charCodeAt(i));  
}  

return bitTotal(Modes);  

}  

//pwStrength函数  
//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色  

function pwStrength(pwd){  
O_color="#eeeeee";  
L_color="#FF0000";  
M_color="#FF9900";  
H_color="#33CC00";  
if (pwd==null||pwd==''){  
Lcolor=Mcolor=Hcolor=O_color;  
}  
else{  
S_level=checkStrong(pwd);  
switch(S_level) {  
case 0:  
Lcolor=Mcolor=Hcolor=O_color;  
case 1:  
Lcolor=L_color;  
Mcolor=Hcolor=O_color;  
break;  
case 2:  
Lcolor=Mcolor=M_color;  
Hcolor=O_color;  
break;  
default:  
Lcolor=Mcolor=Hcolor=H_color;  
}  
}  

document.getElementById("strength_L").style.background=Lcolor;  
document.getElementById("strength_M").style.background=Mcolor;  
document.getElementById("strength_H").style.background=Hcolor;  
return;  
}  </script>
		
		<input type="submit" onclick="return zhuce()" style="text-align:center"  value="注册">
	</form>
</div>

</body>
</html>